<template>
  <Container>
    <div class="container-header title title-center" slot="header">{{couponPackageId ? '编辑礼包' : '新增礼包'}}
      <Button size="large" class="fl btn-back"  icon="ios-arrow-back" @click="jumpPage">返回</Button>
    </div>
    <div class="bg-light pb">
      <div class="container-title">礼包设置</div>
      <Form :label-width="110" :rules="rules" ref="form" :model="form">
        <FormItem label="礼包名称" prop="packageName">
          <Input placeholder="请输入礼包名称" v-model="form.packageName" :maxlength="15" class="wp80"/>
        </FormItem>
        <FormItem label="发放渠道" prop="couponSendChannelEnum">
          <RadioGroup v-model="form.couponSendChannelEnum">
            <Radio :label="0" :disabled="couponPackageId ? true : false">不限</Radio>
            <Radio :label="1" :disabled="couponPackageId ? true : false">轮胎保小程序</Radio>
            <Radio :label="2" :disabled="couponPackageId ? true : false">中策云店</Radio>
            <Radio :label="3" :disabled="couponPackageId ? true : false">业务通</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="礼包说明">
          <Input placeholder="请输入礼包名称" type="textarea" :rows="4" v-model="form.remark" :maxlength="255" class="wp80"/>
        </FormItem>
      </Form>
    </div>
    <div class="container-footer bg-white" slot="footer">
      <Button type="primary" :disabled="disabled" size="large" @click="onClickNext">下一步</Button> 
    </div>
    <Loader :status="status" @refresh="getInfo"></Loader>
  </Container>
</template>
<script>
export default {
  data () {
    /**
     * NONE_LIMIT(0, "不限")
     * TIRE_INSURANCE(1, "轮胎保小程序")
     * CLOUD_APP(2, "中策云店")
     * SALESMAN(3, "业务通")
     */
    return {
      status: 'pass',
      disabled: false,
      couponPackageId: this.$route.query.id || null,
      form: {
        packageName: '',
        couponSendChannelEnum: 2,
        remark: ''
      },
      rules: {
        packageName: [{ required: true, message: '请输入礼包名称', trigger: 'blur' }],
        couponSendChannelEnum: [{ required: true, type: 'number', message: '请选择发放渠道', trigger: 'change' }]
      }
    }
  },
  mounted() {
    if (this.couponPackageId) this.getInfo()
  },
  methods: {
    jumpPage() {
      this.$router.back()
      if (window.localStorage.getItem('couponSendChannelEnum')) window.localStorage.removeItem('couponSendChannelEnum')
      if (window.localStorage.getItem('packageName')) window.localStorage.removeItem('packageName')
      if (window.localStorage.getItem('couponPackageId')) window.localStorage.removeItem('couponPackageId')
    },
    getInfo() {
      let list = {
        'NONE_LIMIT' : 0,
        'TIRE_INSURANCE' : 1,
        'CLOUD_APP' : 2,
        'SALESMAN' : 3
      }
      this.status = 'loading'
      this.$ajaxGet(`/coupon/coupon_package/detail/${this.couponPackageId}`).then(data => {
        this.status = 'pass'
        this.couponPackageId = data.id
        this.form.packageName = data.packageName
        this.form.couponSendChannelEnum = list[data.couponSendChannelEnum]
        this.form.remark = data.remark
      }).catch(() => {
        this.status = 'error'
      })
    },
    onClickNext() {
      this.disabled = true
      this.$refs.form.validate(valid => {
        if (valid) {
          let list = {
            0: 'NONE_LIMIT',
            1: 'TIRE_INSURANCE',
            2: 'CLOUD_APP',
            3: 'SALESMAN'
          }
          let params = {
            packageName: this.form.packageName,
            couponSendChannelEnum: list[this.form.couponSendChannelEnum],
            remark: this.form.remark
          }
          if (this.couponPackageId) {
            params.id = this.couponPackageId
            this.$jsonPost('/coupon/coupon_package/modify_package', params).then(data => {
              this.handleNext()
            })
          } else {
            this.$jsonPost('/coupon/coupon_package/save_package', params).then(data => {
              this.couponPackageId = data
              this.handleNext()
            })
          }
        } else {
          this.disabled = false
        }
      })
    },
    handleNext() {
      window.localStorage.setItem('couponPackageId', this.couponPackageId)
      window.localStorage.setItem('couponSendChannelEnum', this.form.couponSendChannelEnum)
      window.localStorage.setItem('packageName', this.form.packageName)
      this.$router.push({
        name: 'sales/giftbag/next'
      })
      this.disabled = false
    }
  }
}
</script>